<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        body {
            background-image: url("../usermanagement_page/wallpaper.jpg");
            background-size: cover;
            background-attachment: fixed;

        }
    </style>

</head>
<body>
<div id="app">



    <!--按钮-->

    <el-row>

        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>

    </el-row>
    <!--添加数据对话框表单-->
    <el-dialog
            title="添加用户"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="user" label-width="80px">
            <el-form-item label="用户账号">
                <el-input v-model="user.userAccount"></el-input>
            </el-form-item>

            <el-form-item label="用户密码">
                <el-input v-model="user.userPassword"></el-input>
            </el-form-item>

            <el-form-item label="电话">
                <el-input v-model="user.phone"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-radio-group v-model="user.gender">
                    <el-radio label="1">女</el-radio>
                    <el-radio label="0">男</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="邮箱">
                <el-input v-model="user.email"></el-input>
            </el-form-item>


            <el-form-item label="年龄">
                <el-input v-model="user.age" ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addUser">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>


    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >

            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="userAccount"
                    label="用户账号"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    label="性别"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.gender === '0' ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="email"
                    align="center"
                    label="邮箱">
            </el-table-column>


            <el-table-column
                    prop="age"
                    label="年龄"
                    align="center">
            </el-table-column>
            <!-- 添加删除按钮列 -->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteUserByAccount(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
<button onclick="DownLoadAllUsers()">打印所有用户</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


<script>
    new Vue({
        el: "#app",

        mounted(){
            //当页面加载完成后发送异步请求获取数据
            this.selectAll();
        },

        methods: {


            selectAll(){

                //提data的生命周期
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/stadium/admin/getUsers"
                }).then(function (resp){
                    _this.tableData = resp.data;
                })
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex%2 === 1) {
                    return 'warning-row';
                } else if (rowIndex%2 === 0) {
                    return 'success-row';
                }
                return '';
            },

            // 查询方法
            onSubmit() {
                //console.log(this.brand);

                this.selectAll();

            },
            // 添加数据
            addUser(){
                //console.log(this.brand);
                //发送ajax异步请求，添加数据
                // var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/stadium/common/register",
                    data:JSON.stringify(this.user),
                }).then(resp=>{
                    if(resp.data == 1){

                        //关闭窗口
                        this.dialogVisible = false;
                        //重新查询
                        this.selectAll();
                        // 弹出消息提示
                        this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                    }
                })

            },


            //删除数据

            deleteUserByAccount(row){
                var user = {"userAccount":row.userAccount}
                window.alert(row.userAccount)
                axios({
                    method:"post",
                    url:"http://localhost:8080/stadium/admin/deleteByAccount",
                    data:JSON.stringify(user),
                    dataType:"json",
                }).then((resp) => {
                        if (resp.data === 1) { // 删除成功，重新查询表格数据
                            this.selectAll(); // 弹出消息提示//
                            this.$message({message: '删除成功', type: 'success',});
                        } else { // 删除失败，弹出错误提示
                            this.$message.error('删除失败，请稍后重试');
                        }
                    })
            },


        },

        data() {
            return {
                //每页的条数
                pageSize : 5,

                //总记录数
                totalCount:100,

                // 当前页码
                currentPage: 1,

                // 添加数据对话框是否展示的标记
                dialogVisible: false,

                // 品牌模型数据
                user: {
                    userAccount: '',
                    userPassword: '',
                    gender: '',
                    email:"",
                    age:"",
                    phone:''
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [
                    {
                        userAccount: '1',
                        userPassword: '11',
                        gender: '11',
                        id:"11",
                        email:"11",
                        age:"11"
                }, {
                        userAccount: '12',
                        userPassword: '2211',
                        gender: '211',
                        id:"112",
                        email:"121",
                        age:"112"
                }, {
                        userAccount: '133',
                        userPassword: '311',
                        gender: '131',
                        id:"113",
                        email:"131",
                        age:"131"
                }, {
                        userAccount: '41',
                        userPassword: '411',
                        gender: '114',
                        id:"114",
                        email:"141",
                        age:"141"
                }
                ]
            }
        }
    })


    function DownLoadAllUsers(){
        $.ajax({
            url: "http://localhost:8080/stadium/admin/DownLoadAllUsers",
            method: "GET",
            xhrFields: {
                responseType: 'blob'
            },
            success: function(data) {
                var a = document.createElement('a');
                var url = window.URL.createObjectURL(data);
                console.log(url)
                a.href = url;
                a.download = "AllUsers.csv";
                document.body.append(a);
                a.click();
                window.URL.revokeObjectURL(url);
                $(a).remove();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log("Error:", errorThrown);
            }
        });
    }

</script>

</body>
</html>